<template lang="pug">
  .main
    Datatables(
      v-bind="$props"
    )
</template>
<script>

import Datatables from '@/components/Datatables'

export default {
  name: 'DatatablesPage',
  components: {
    Datatables
  },
  props: {
    columnsInit: Object
  },
  data () {
    return {}
  },
  created () {
    // const relationKeys = columnsKeys.filter(key => columnsList[key].relation).map(key => columnsList[key].relation)
  // }
  // mounted () {
  // },
  // computed: {
  // },
  // methods: {
  }
}
</script>

<style scoped lang="sass">
.main
  padding: 20px
  display: flex
  flex-direction: column
  flex: 1
  height: 100%
.table-wrapper
  display: flex
  flex-direction: column
  flex: 1
  position: relative
  z-index: 100
.table-fixed
  position: absolute
  right: 0
.table-top
  margin-bottom: 10px
  position: relative
  z-index: 200
  .toolbar
    float: left
    margin-right: 12px
  .filter-box
    float: right
    margin-left: 12px
  .customToolbar
    margin-bottom: 10px
.pagination
  flex: 1
  padding-top: 12px
  text-align: right
.column-filter
  float: left
  padding-top: 12px
.table-footer
  display: flex
  justify-content:  space-between
  align-item: center
  position: relative
  z-index: 300
.dialogform
  padding: 16px
</style>
